<template>
	<view class="box">
		<view class="selectBox flex">
			<fui-input @focus="isFocus=true" @blur="isFocus=false" placeholder="搜索用户名字/绽放号">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="search" color="#333" :size="48"></fui-icon>
					</view>
				</template>
			</fui-input>
			<view style="padding: 0rpx 20rpx;" v-if="isFocus">
				搜索
			</view>
		</view>
		<view class="listBox">
			<scroll-view scroll-y :show-scrollbar="false" class="swiper">
				<view class="flex-js userBox" v-for="(item,index) in 20" :key="index" @click="toUser">
					<view class="flex">
						<view class="imgBox">
							<image src="../static/indexad/dy.png" mode=""></image>
						</view>
						<view class="" style="padding-right: 20rpx;">
							<view class="nameBox">
								用户的名字
							</view>
							<view class="numBox">
								绽放号：15151987654
							</view>
							<view class="introBox">
								个人简介哦哦哦哦哦哦哦哦阿里山可见度绿卡就是的ask建档立卡商机阿斯利康大家阿斯顿
							</view>
						</view>
					</view>
					<view class="">
						<fui-button type="danger" btnSize="mini">关注</fui-button>

					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFocus: false,
			};
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.selectBox {
		background-color: white;
		height: 110rpx;
	}

	.swiper {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 20rpx;
	}

	.nameBox {}

	.numBox {
		font-size: 26rpx;
		color: #959595;
	}

	.introBox {
		color: #959595;
		font-size: 26rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 1;
	}

	.fui-left__icon {
		margin-right: 20rpx;
	}

	.imgBox {
		width: 110rpx;
		height: 110rpx;
		border-radius: 100%;
		margin-right: 20rpx;

		image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 100%;
		}
	}

	.userBox {
		padding: 20rpx 0rpx;
	}

	.box {
		background-color: white;
		height: 100vh;
		width: 100vw;
	}

	.listBox {
		height: calc(100vh - 110rpx);
	}
</style>